import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'

import global from './modules/global'
import menu from './modules/menu'
import tabs from './modules/tabs'

import { TypedUseSelectorHook, useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux'

// redux persist
const persistConfig = {
  key: 'redux-state',
  storage: storage
}
// create reducer
const reducer = combineReducers({
  global,
  menu,
  tabs
})
const persistReducerConfig = persistReducer(persistConfig, reducer)

// redux middleWares
const middleWares = [reduxThunk, reduxPromise]

// store
export const store = configureStore({
  reducer: persistReducerConfig,
  middleware: middleWares,
  devTools: true
})

// create persist store
export const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// useSelector 用于从store中获取state的值
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector
export const useDispatch = () => useReduxDispatch<AppDispatch>()
